import { Button, Image } from "antd";
import { memo, useCallback, useState } from "react";
import styles from "./index.module.scss";
import { SearchOutlined, DownloadOutlined } from "@ant-design/icons";
import { downloadImg } from "../../../utils/downloadImg";

interface IProps {
  src: string;
  onClick: () => void;
  selected: boolean;
}

function MyImage({ src, onClick, selected }: IProps) {
  const [visible, setVisible] = useState(false);

  const preview = useCallback(() => {
    setVisible(true);
  }, []);

  return (
    <div className={`${styles.imgBox} ${selected ? styles.on : ""}`}>
      <img src={src} className={styles.img} alt="" onClick={() => onClick()} />
      <Image
        className={styles.img}
        src={src}
        style={{ display: "none" }}
        preview={{
          visible,
          src,
          onVisibleChange: (value) => setVisible(value),
        }}
      />
      <div className={styles.operationBox}>
        <Button
          className={styles.btn}
          type="text"
          onClick={preview}
          icon={<SearchOutlined className={styles.btnIcon} />}
          size="small"
        />
        <Button
          className={styles.btn}
          type="text"
          onClick={() => downloadImg(src)}
          icon={<DownloadOutlined className={styles.btnIcon} />}
          size="small"
        />
      </div>
    </div>
  );
}

export default memo(MyImage);
